<template>
  <el-dialog title="编辑"  :close-on-click-modal="false" :visible.sync="show" class="dialog_index dialog_banner site_fixed"
   :before-close="cancle">
   <el-form ref="form" v-loading="loading" class="agency_form"> 
      <el-tabs type="card" v-model="activeName">
         <el-tab-pane :label="item.site" :name="item.site" v-for="item  in formList" :key="item.id">
            <el-form-item label="说明书类型：" >
              <el-input @change="changeInstructionsType"  placeholder="说明书类型（必填项)" v-model="item.instructions_type"></el-input>
            </el-form-item>
            <el-form-item label="适用产品：">
              <el-input @change="changeApplicableProduct"  placeholder="适用产品（必填项)" v-model="item.applicable_product"></el-input>
            </el-form-item>
            <el-form-item label="说明书标题：">
              <el-input :placeholder="'说明书标题('+item.site+')（必填项)'" v-model="item.instructions_title"  ></el-input>
            </el-form-item>
            <el-form-item label="连接示意图：" class="connection_diagram_container">
              <div class="connection_diagram">
                <el-upload  :action="actionUrl" 
                :on-success="(response, file, fileList) => handleSuccess(response, file, fileList, item)"
                  :on-error="handleError" :before-upload="beforeUpload"
                :show-file-list="false" accept=".jpg,.jpeg,.png " :data="{type:'instructions', imageheight: imgH, imagewidth: imgW}" >
                  <br><el-button size="small" type="primary" @click.stop="closeDrawerDialog">图库选择</el-button> 
                  <el-button slot="trigger" size="small" type="primary">本地上传</el-button>
                </el-upload> 
                <el-image :src="utils.setCdnUrl() + item.connection_diagram" v-show="item.connection_diagram"></el-image>
                <p class="upload__tip">建议上传.jpg/.jpeg/.png格式，大小≤1M，每次只能上传一个</p>
              </div>
            </el-form-item>
            <el-form-item label="兼容信息：" >
              <el-input type="textarea" autosize resize="none" :placeholder="'兼容信息('+item.site+')（必填项)'" v-model="item.compatible_information" ></el-input>
            </el-form-item>
            <el-form-item label="提示：" >
              <el-input type="textarea"  autosize resize="none" :placeholder="'提示('+item.site+')（必填项)'" v-model="item.prompt" ></el-input>
            </el-form-item>
            <el-form-item label="产品参数：">
              <el-input type="textarea"   autosize resize="none" :placeholder="'产品参数('+item.site+')（必填项)'" v-model="item.product_parameters" ></el-input>
            </el-form-item>
            <el-form-item label="注意事项：">
              <el-input type="textarea"   autosize resize="none" :placeholder="'注意事项('+item.site+')（必填项)'" v-model="item.matters_needing_attention" ></el-input>
            </el-form-item>
            <el-form-item label="故障排除：">
              <el-input type="textarea"  autosize resize="none" :placeholder="'故障排除('+item.site+')（必填项)'" v-model="item.troubleshooting" ></el-input>
            </el-form-item>
            <el-form-item label="技术支持：">
              <el-input :placeholder="'技术支持('+item.site+')（必填项)'" v-model="item.technical_support" ></el-input>
            </el-form-item>

        </el-tab-pane>
      </el-tabs>
     
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="search" :loading="is_submit" @click="submitForm">保存</el-button>
      <el-button @click="cancle">取消</el-button>
    </span>
    <Drawer v-show="showDrawer" :type="'instructions'" :show="showDrawer"  @closeDialog="closeDrawerDialog"></Drawer>

   </el-dialog>
</template>

<script>
import { editPost, editGet } from '@/api/product/instructions.js'
import Drawer  from '@/components/Gallery/index.vue' 
export default {
  data () {
    return {
      formList:[],
      loading: false,
      activeName: '',
      is_submit : false,
      image: '',
      showDrawer: false,
      actionUrl: "/api/api/general/upload",
      imgW: '',
      imgH: ''
    }
  },
  props: {
    show: Boolean,
    closeDialog:Function,
    id:Number
  },
  components: { Drawer },
  watch: {
    show:function(){
      if(this.show){
        this.loading = true
        this.editGet()
      }
    }
  },
  methods: {
    changeInstructionsType(value) {
      let list = this.formList
      for(let i = 0; i < list.length; i++){
        list[i].instructions_type = value
      }
      this.formList = list
    },
    changeApplicableProduct(value) {
      let list = this.formList
      for(let i = 0; i < list.length; i++){
        list[i].applicable_product = value
      }
      this.formList = list
    },
    // 图库选择是否显示
    closeDrawerDialog (data) {
      this.showDrawer = !this.showDrawer
      if(data && data.filePathNameHttp )  { 
        this.image = data.filePathNameHttp
        for(let i =0; i< this.formList.length; i++){
          this.formList[i].connection_diagram = data.filePathName
        }
        
      }
    },
    handleSuccess(response){
      this.image = response.data.filePathNameHttp
      for(let i =0; i< this.formList.length; i++){
        this.formList[i].connection_diagram = response.data.filePathName
      }
      this.$message.success('上传连接示意图成功')   
    },
    handleError(){
      this.$message.error('上传连接示意图失败')   
    },
    beforeUpload(file){
      let that = this
      const isLt2M = file.size / 1024  <  1024;
      if(!isLt2M){
        this.$message.error("上传图片大小不超过1M")
        return false
      }
      if(file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/jpg'){
        this.$message.error("仅支持.jpg/.jpeg/png格式的图片")
        return false
      }
      const isSize = new Promise(function(resolve, reject){
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function() {
          let valid = img.width ==  img.height ;
          valid ? resolve() : reject();
          that.imgW = img.width
          that.imgH = img.height
        }
        img.src = _URL.createObjectURL(file);
      }).then(()=>{

        return file
      }, ()=>{
        return file
      })
      return isSize
    },
    editGet () {
      this.loading = true
      let params = {
        product_id: this.id
      }
      editGet(params).then(res=>{
        if(res.state == 1) {
          let data  = res.data
          this.formList = data
          this.image = data[0].httpImage
          this.activeName= data[0].site
            
        } else {
          this.$message.error(res.message)
        }
          this.loading = false
      })
    },
    submitForm () {
      let status = this.validateForm()
      if(status && !this.is_submit){
        this.editPost()
      }
    },
    editPost () {
      let list = this.formList
      let params = {
        data: JSON.stringify(list) 
      }
      this.is_submit = true
      editPost(params).then(res => {
        if(res.state == 1){
          this.$message.success('保存成功')   
          this.cancle()
        }
        this.is_submit = false
      })
    },
    validateForm () {
      let list = this.formList

      let status = true
      for ( let i = 0; i < list.length; i++ ){
        if (list[i].instructions_type === '') {
          this.$message.error('站点' + list[i].site + '说明书类型为必填项')
          status = false
          break
        }
        if (list[i].applicable_product === '') {
          this.$message.error('站点' + list[i].site + '适用产品为必填项')
          status = false
          break
        }

        if (list[i].instructions_title === '') {
          this.$message.error('站点' + list[i].site + '说明书标题为必填项')
          status = false
          break
        }
        if (list[i].connection_diagram === '') {
          this.$message.error('站点' + list[i].site + '连接示意图为必填项')
          status = false
          break
        }
         if (list[i].compatible_information === '') {
          this.$message.error('站点' + list[i].site + '兼容信息为必填项')
          status = false
          break
        }
        if (list[i].prompt === '') {
          this.$message.error('站点' + list[i].site + '提示为必填项')
          status = false
          break
        }
         if (list[i].product_parameters === '') {
          this.$message.error('站点' + list[i].site + '产品参数为必填项')
          status = false
          break
        }
         if (list[i].matters_needing_attention === '') {
          this.$message.error('站点' + list[i].site + '注意事项为必填项')
          status = false
          break
        }
         if (list[i].troubleshooting === '') {
          this.$message.error('站点' + list[i].site + '故障排除为必填项')
          status = false
          break
        }
         if (list[i].technical_support === '') {
          this.$message.error('站点' + list[i].site + '技术支持为必填项')
          status = false
          break
        }
      }
      return status
    },
    cancle(){
      this.$refs.form.resetFields(); // 清空原来的数据
      this.$emit('closeDialog')

    },
  },
 
}
</script>

<style lang="scss">

</style>